<template>
  <div class="monaco-container">
    <div ref="container" class="monaco-editor" style="height: 600px"></div>
  </div>
</template>

<script>
import * as monaco from 'monaco-editor'
export default {
  name: 'Index',
  props: {
    // code: {
    //   type: String,
    //   default: function() {
    //     return ''
    //   }
    // },
    language: {
      type: String,
      default: function() {
        return 'html'
      }
    },
    editorOptions: {
      type: Object,
      default: function() {
        return {
          selectOnLineNumbers: true,
          roundedSelection: false,
          cursorStyle: 'Line',
          automaticLayout: false,
          glyphMargin: true,
          useTabStops: false,
          fontSize: 20,
          autoIndent: false
        }
      }
    }
  },
  data() {
    return {
      codeCopy: null
    }
  },
  mounted() {
    this.initEditor()
  },
  methods: {
    initEditor() {
      const self = this
      console.log('code: ', this.code)
      console.log('code: ', self.code)
      self.$refs.container.innerHTML = ''
      self.monacoEditor = monaco.editor.create(self.$refs.container, {
        value: self.code,
        language: self.language,
        theme: 'vs-dark',
        editorOptions: self.editorOptions
      })
      self.$emit('onMounted', self.monacoEditor) // 编辑器创建完回调
      self.monacoEditor.onDidChangeModelContent(function(event) {
        self.$emit('onCodeChange', self.monacoEditor.getValue(), event)
      })
      // window.addEventListener('resize', function() {
      //   self.initEditor()
      // })
    }
  }
}
</script>

<style scoped>

</style>
